<!-- 
【什么是html】
    HTML 指的是超文本标记语言 (Hyper Text Markup Language) ，它是用来描述网页的一种语言。
    HTML 不是一种编程语言，而是一种标记语言 (markup language)。
    标记语言是一套标记标签 (markup tag)。

    所谓超文本，有 2 层含义：
    1. 它可以加入图片、声音、动画、多媒体等内容（超越了文本限制 ）。
    2. 它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本 ）

【本html文件的内容】
    在此html文件中，浅试了一些常用的html标签，使用浏览器打开，编辑本文件刷新浏览器即可看到效果。


【目标读者】
    纯新手，可用来对照修改，看浏览器中呈现的效果，以便了解常用标签的作用。
    有经验的可以跳过。

【html标签推荐学习链接】
菜鸟教程 https://www.runoob.com/html/html-tutorial.html

-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 这是一个注释，选中一行，ctrl+/,可以快速注释或取消注释 -->
    <title>基础html标签</title>
</head>
<body>
    <!-- 标题标签： table tr td-->
    <h1>这是一级标题</h1>
    <h2>这是二级标题</h2>
    <h3>这是三级标题</h3>
    <h4>这是四级标题</h4>


    <!-- 基础表格标签： table tr th td-->
    <table>
        <tr><th>姓名</th>  <th>性别</th> <th> 年龄 </th></tr>
        <tr><td>刘德华</td>  <td>男</td> <td> 56 </td></tr>
        <tr><td>张学友</td>  <td>男</td> <td> 58 </td></tr>
        <tr><td>郭富城</td>  <td>男</td> <td> 51 </td></tr>
        <tr><td>黎明</td>  <td>男</td> <td> 57 </td></tr>
    </table>

    <!-- table标签,可以设置一些属性 -->
    <table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="249">
        <tr><th>姓名</th>  <th>性别</th> <th> 年龄 </th></tr>
        <tr><td>刘德华</td>  <td>男</td> <td> 56 </td></tr>
        <tr><td>张学友</td>  <td>男</td> <td> 58 </td></tr>
        <tr><td>郭富城</td>  <td>男</td> <td> 51 </td></tr>
        <tr><td>黎明</td>  <td>男</td> <td> 57 </td></tr>
    </table>



    <!--可以使用表格的 <tbody>  <thead>  <tfoot> 标签元素，规定表格的各个部分（主体、表头、页脚） -->
    <table align="center" width="500" height="249" border="1" cellspacing="0">
        <thead>
            <tr><th>排名</th><th>关键词</th><th>趋势</th><th>进入搜索</th><th>最近七日</th><th>相关链接</th></tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>三国演义</td>
                <td><img src="../00-asset/down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
    
            <tr>
                <td>1</td>
                <td>红楼梦</td>
                <td><img src="../00-asset/down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
            <tr>
                <td>3</td>
                <td>西游记</td>
                <td><img src="../00-asset/up.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
            <tr>
                <td>1</td>
                <td>水浒传</td>
                <td><img src="../00-asset/down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
            <tr>
                <td>1</td>
                <td>流浪地球</td>
                <td><img src="../00-asset/down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
            <tr>
                <td>1</td>
                <td>三体</td>
                <td><img src="../00-asset/up.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
        </tbody>           
    </table>



    <!-- 合并单元格 -->
    <table width="500" height="249" border="1" cellspacing="0">
        <tr>
            <td></td>
            <td colspan="2"></td>               
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>               
            <td></td>
            <td></td>
        </tr>
    
    </table>

    <!-- 无序列表 -->
    <h4>无序列表之有味道的食物：</h4>
    <ul>
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>螺狮粉</li>
        <li>
            <p>鲱鱼罐头</p>
        </li>
    </ul>

    <!-- 有序列表 -->
    <h4>0713快男排名</h4>
    <ol>
        <li>陈楚生</li>
        <li>苏醒</li>
        <li>魏晨</li>
        <li>张杰</li>
        <li>吉杰</li>
        <li>俞灏明</li>
        <li>王栎鑫</li>
        <li>阿穆隆</li>
        <li>张远</li>
        <li>王铮亮</li>
        <li>姚政</li>
        <li>郭彪</li>
        <li>陆虎</li>
    </ol>

    <!-- 自定义列表 -->
    <dl>
        <dt>关注我们</dt>
        <dd>微博</dd>
        <dd>微信</dd>
        <dd>QQ</dd>
        <dt>商务合作</dt>
        <dd>方便面</dd>
        <dd>巧克力</dd>
        <dd>电动车</dd>
    </dl>

    <!-- 表单  -->    
    <form action="" method="">
        <!-- =====================表单的input元素=======================  -->
        <!-- text 文本框 用户可以里面输入任何文字 -->
        用户名: <input type="text" name="username" value="请输入用户名" maxlength="6">  
        <br /> 

        <!-- password 密码框 用户看不见输入的密码 -->
        密码: <input type="password" name="pwd" >  
        <br />

        <!-- radio 单选按钮  可以实现多选一 -->
        <!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1 -->
        <!-- 单选按钮和复选框可以设置checked 属性, 当页面打开的时候就可以默认选中这个按钮 -->
        性别: 男 <input type="radio" name="sex" value="男"> 女  <input type="radio" name="sex" value="女" checked="checked"> 
        <br />
        <!-- checkbox 复选框  可以实现多选 -->
        爱好: 吃饭 <input type="checkbox" name="hobby" value="吃饭"> 睡觉 <input type="checkbox" name="hobby">  打豆豆 <input type="checkbox" name="hobby" checked="checked"> 
        <br />

        <!-- 点击了提交按钮,可以把 表单域 form 里面的表单元素 里面的值 提交给后台服务器 -->
        <input type="submit" value="免费注册">

        <!-- 重置按钮可以还原表单元素初始的默认状态 -->
        <input type="reset" value="重新填写">

        <!-- 普通按钮 button  后期结合js 搭配使用-->
        <input type="button" value="获取短信验证码"> <br />

        <!-- 文件域 使用场景 上传文件使用的 -->
        上传头像:  <input type="file" >
        <br />

        <!-- =====================select下拉表单=======================  -->
        籍贯: 
        <select>
            <option>山东</option>
            <option>北京</option>
            <option>天津</option>
            <option selected="selected">火星</option>
        </select>
        <br />
        <!-- =====================textarea文本域=======================  -->
        今日反馈:
        <textarea cols="50" rows="5">请多指教 </textarea>
   </form>
</body>
</html>